/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
//事件模板管理
import React, { Component } from 'react';
import Filtrate from '../../../components/common/Filtrate';
import Container from "../../../components/common/Container";
import MyTable from "../../../components/common/MyTable";
import PublicService from "../../../services/PublicService";
import PublicTemplate from '../../../services/PublicTemplate'
import request from '../../../utils/request';
import MyPagination from "../../../components/common/MyPagination";
import { message, Divider, TagSpi, Switch, Icon, Spin, Steps } from 'antd';
import styles from './ProjectRoles.less';
import Pro_menu from './Pro_menu';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1315525_f8lqdqjh676.js',
});
class ProjectRoles extends Component {

  state = {
    type: '菜单',
    roleId: '',
    EditData: {},
    status: "",
    params: {},
    pageSize: 10,
    pageIndex: 1,
    total: 0,
    delConfirm: false,
    addModal: false,
    selectedRowKeys: [],
    dataSate: [],
    addWrap: true,
    editWrap: false,
    EditArr: [],
    AddArr: [],
    GtteWrapId: '',
    spinning: false,
    modalBtnLoading:false
  }
  componentDidMount() {
    this.onSubmit(1, 10)


  }


  //查询
  onSubmit = (page, size) => {
    const params = this.f1.getForm().getFieldsValue();
    params.page = page;
    params.rows = size;
    params.projectStatus = this.state.status
    params.roleLevel = 2
    this.setState({
      params,
      spinning: true,
      pageIndex:page,
      pageSize:size
    })

    request({
      url: '/pm-web/projectmanage/role/queryRole',
      method: 'POST',
      data: params
    }).then(data => {
      // console.log(data)
      if (data.rc === 0) {

        this.setState({
          dataSate: data.ret.items,
          spinning: false,
          total: data.ret.rowCount
        })
      }
    })
  }

  //重置
  ResetForm = () => {
    // console.log('重置')
  }

  //新增
  addBtnText = () => {
    // console.log('新增')
    this.setState({
      addWrap: true
    })
  }

  // 取消保存
  ModalCancel = (type) => {
    let t = this;
    t.setState({
      [type]: false,
      modalBtnLoading: false
    })
  };

  //多选
  onSelectChange = (selectedRowKeys, row) => {
    // console.log(selectedRowKeys, row)
    this.setState({ selectedRowKeys, row })
  };


  // 分页
  onChangePage = (page, size) => {
    this.setTimeAndSearch(this.state.params, page, size);
    this.setState({
      pageSize: size,
      pageIndex: page,
    })
  };

  onChangePage1 = (page, size) => {

    this.setTimeAndSearch(this.state.params, 1, size);
    this.setState({
      pageSize: size,
    })
  };

  setTimeAndSearch = (val, pageIndex, row) => {

    this.setState({
      spinning: true,
      pageIndex
    })

    // console.log(val, pageIndex, row)
    val.page = pageIndex;
    val.rows = row;

    request({
      url: '/pm-web/projectmanage/role/queryRole',
      method: 'POST',
      data: val
    }).then(data => {
      if (data.rc === 0) {

        this.setState({
          dataSate: data.ret.items,
          spinning: false,
          total: data.ret.rowCount
        })
      }
    })

  };





  //编辑
  editBtn = () => {
    if (this.state.selectedRowKeys.length !== 1) {
      message.warning('只能对单一事件编辑!')
      return
    }
    this.setState({
      GtteWrap: true,
      GtteWrapId: this.state.dataSate[this.state.selectedRowKeys[0]].projectId
    })


  }




  onModalSaveSmall = (v) => {
    this.setState({
      modalBtnLoading:true
    })
    if (this.state.type === '菜单') {
      // console.log(v)
      request({
        url: '/pm-web/projectmanage/menu/updateRoleMenuByRoleId',
        method: 'POST',
        data: { roleId: this.state.roleId, menuList: v.checkedKeys2 }
      }).then(data => {
        if (data.rc === 0) {
          message.success('操作成功')
          this.onSubmit(this.state.pageIndex, this.state.pageSize)

        } else {
          message.warning(`${data.err}`)
        }
        this.setState({
          MyModal1VisibleSmall: false,
          modalBtnLoading:false
        })
      })
    } else {
      request({
        url: '/pm-web/projectmanage/button/updateRoleButtonByRoleId',
        method: 'POST',
        data: { roleId: this.state.roleId, butList: v.checkedKeys2 }
      }).then(data => {
        if (data.rc === 0) {
          message.success('操作成功')
          this.onSubmit(this.state.pageIndex, this.state.pageSize)

        } else {
          message.warning(`${data.err}`)
        }
        this.setState({
          MyModal1VisibleSmall: false,
          modalBtnLoading:false
        })
      })
    }


  }





  getMenuTreeByRoleId = (record) => {
    request({
      url: '/pm-web/projectmanage/menu/getMenuTreeByRoleId',
      method: 'POST',
      data: { roleId: record.roleId }
    }).then(data => {
      // console.log(data)
      if (data.rc === 0) {
        this.setState({
          EditData: data.ret,
          roleId: record.roleId,
          type: '菜单'
        }, () => {
          this.setState({
            MyModal1VisibleSmall: true
          })
        })
      }
    })
  }
  getButtonTreeByRoleId = (record) => {
    request({
      url: '/pm-web/projectmanage/button/getButtonTreeByRoleId',
      method: 'POST',
      data: { roleId: record.roleId }
    }).then(data => {
      // console.log(data)
      if (data.rc === 0) {
        this.setState({
          EditData: data.ret,
          roleId: record.roleId,
          type: '按钮'
        }, () => {
          this.setState({
            MyModal1VisibleSmall: true
          })
        })
      }
    })
  }



  render() {

    let width = document.body.clientWidth;
    const height = document.body.clientHeight;
    let containerHeight = '71vh';
    let tableHeight = 320;
    if (width > 1367) {
      tableHeight = 340;
      containerHeight = '77vh';
    }
    const { pageSize, pageIndex, selectedRowKeys, total, dataSate, delConfirm ,modalBtnLoading} = this.state
    let rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };

    const items = [

      {
        type: 'input',
        label: '名称',
        paramName: 'roleName',
      },

    ];



    const columns = [
      { title: '序号', dataIndex: 'num', width: 50 },

      { title: '名称', dataIndex: 'roleName', key: 'roleName', width: 100, align: 'center' },
      {
        title: '菜单设置', dataIndex: 'roleNam2eStr', key: 'projec2Number', width: 200, align: 'center',
        render: (text, record) =>
          <span onClick={this.getMenuTreeByRoleId.bind(this, record)} style={{ color: '#40a9ff', border: '1px solid #40a9ff', padding: 2, borderRadius: 5, cursor: 'pointer' }}>
            <IconFont type="icon-gantetu" />  编辑
          </span>
      },
      {
        title: '按钮设置', dataIndex: 'roleNameStr', key: 'projectNumber', width: 200, align: 'center',
        render: (text, record) =>
          <span onClick={this.getButtonTreeByRoleId.bind(this, record)} style={{ color: '#40a9ff', border: '1px solid #40a9ff', padding: 2, borderRadius: 5, cursor: 'pointer' }}>
            <IconFont type="icon-gantetu" />  编辑
          </span>
      },


    ];
    return (

      <div style={{ position: 'relative', boxSize: 'border-box', padding: 5, paddingTop: 0, paddingBottom: 0 }}>
        {
          <div style={{ flex: 1 }}>
            <Spin spinning={this.state.spinning} size='large'>
              {
                this.state.MyModal1VisibleSmall && <Pro_menu
                  onModalSave={this.onModalSaveSmall}
                  EditData={this.state.EditData}
                  ModalCancel={this.ModalCancel.bind(this, 'MyModal1VisibleSmall')}
                  modalBtnLoading={modalBtnLoading}
                />
              }
              <Filtrate
                items={items}
                ref={ref => { this.f1 = ref }}
                submit={this.onSubmit.bind(this, 1, 10)}
                ResetForm={this.ResetForm}
              />

              <Container
                style={{ height: containerHeight, position: "relative", overflow: 'auto', padding: 10 }}
              // header={true}
              //   editBtnShow={true}
              //   editBtn={this.editBtn}
              >

                <MyTable
                  // rowSelection={rowSelection}
                  scroll={{ y: height - tableHeight, x: 1125 }}
                  columns={columns}
                  dataSource={PublicService.transformArrayData(dataSate, true, true, pageIndex, pageSize)}
                  pagination={false}
                />
                <MyPagination
                  showPage
                  pageSize={pageSize}
                  current={this.state.pageIndex}
                  total={total}
                  showSizeChanger
                  showQuickJumper
                  onChange={this.onChangePage.bind(this)}
                  onShowSizeChange={this.onChangePage1.bind(this)}
                />
              </Container>
            </Spin>
          </div>
        }


      </div>
    );


  }
}
export default ProjectRoles;

